<template>
  <div class="app-container">
    <a-layout class="main-layout">
      <!-- 左侧导航栏 -->
      <a-layout-sider 
        v-model:collapsed="collapsed" 
        :width="200" 
        :collapsed-width="80"
        class="sidebar"
        theme="light"
      >
        <div class="logo-section">
          <div class="logo">
            <FileTextOutlined class="logo-icon" />
            <span v-if="!collapsed" class="logo-text">文档</span>
          </div>
        </div>
        
        <a-menu 
          mode="inline" 
          :selected-keys="[$route.name]"
          class="nav-menu"
        >
          <a-menu-item 
            v-for="item in menuItems" 
            :key="item.key"
            @click="navigateTo(item.path)"
          >
            <component :is="item.icon" />
            <span>{{ item.title }}</span>
          </a-menu-item>
        </a-menu>
        
        <div class="sidebar-footer">
          <div class="collapse-trigger" @click="collapsed = !collapsed">
            <MenuUnfoldOutlined v-if="collapsed" />
            <MenuFoldOutlined v-else />
          </div>
        </div>
      </a-layout-sider>
      
      <!-- 主内容区域 -->
      <a-layout-content class="main-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  FileTextOutlined,
  QuestionCircleOutlined,
  HistoryOutlined,
  ToolOutlined,
  ApiOutlined,
  BarChartOutlined,
  SettingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const collapsed = ref(false)

// 菜单项配置
const menuItems = [
  {
    key: 'TechSpec',
    icon: FileTextOutlined,
    title: '技术规范文档',
    path: '/tech-spec'
  },
  {
    key: 'Help',
    icon: QuestionCircleOutlined,
    title: '帮助',
    path: '/help'
  },
  {
    key: 'History',
    icon: HistoryOutlined,
    title: '历史版本',
    path: '/history'
  },
  {
    key: 'RDPTool',
    icon: ToolOutlined,
    title: 'RDP工具',
    path: '/rdp-tool'
  },
  {
    key: 'APIDoc',
    icon: ApiOutlined,
    title: 'API接口文档',
    path: '/api-doc'
  },
  {
    key: 'Statistics',
    icon: BarChartOutlined,
    title: '统计分析',
    path: '/statistics'
  },
  {
    key: 'Settings',
    icon: SettingOutlined,
    title: '会议设置',
    path: '/settings'
  }
]

// 导航到指定路由
const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.app-container {
  height: 100vh;
  background: #f0f2f5;
}

.main-layout {
  height: 100%;
}

.sidebar {
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.logo-section {
  padding: 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.logo-icon {
  font-size: 28px;
  color: #1890ff;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.nav-menu {
  border-right: none;
  padding: 16px 0;
}

.nav-menu .ant-menu-item {
  margin: 4px 8px;
  border-radius: 6px;
  height: 48px;
  line-height: 48px;
  display: flex;
  align-items: center;
}

.nav-menu .ant-menu-item:hover {
  background: #e6f7ff;
}

.nav-menu .ant-menu-item-selected {
  background: #1890ff;
  color: #fff;
}

.nav-menu .ant-menu-item-selected:hover {
  background: #40a9ff;
}

.nav-menu .ant-menu-item-selected .anticon {
  color: #fff;
}

.sidebar-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.collapse-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.collapse-trigger:hover {
  background: #f0f0f0;
}

.main-content {
  background: #f0f2f5;
  overflow: hidden;
}
</style>